<template>
  <v-chart
    class="chart"
    :style="{ 'width': width, 'height': height}"
    :option="option"
    v-if="JSON.stringify(option) != '{}'"
  />
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import { currentGET } from "@/api";
import { graphic } from "echarts/core";

// 组件的 Props
const props = defineProps({
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  chartOptions: {
    type: Object,
    default: () => { }
  },
  data: {
      type: Object,
      default: () => { }
  },
});

// 响应式的图表配置对象
// const option = ref({});

// 请求数据并更新图表配置
// const getData = () => {
//   currentGET("mix", {}).then((res) => {
//     console.log("mix data:", res);
//     if (res.success) {
//       setOption(res.data);  // 如果请求成功，设置图表选项
//     } else {
//       window["$message"]({
//         text: res.msg,
//         type: "warning",
//       });
//     }
//   });
// };

// 设置图表的配置选项
const option = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
      formatter: function (params: any) {
        var result = params[0].name + "<br>";
        params.forEach(function (item: any) {
          if (item.value) {
            if (item.seriesName === "总额") {
              result += `${item.marker} ${item.seriesName} : ${item.value}万元</br>`;
            } else {
              result += `${item.marker} ${item.seriesName} : ${item.value}万元</br>`;
            }
          } else {
            result += `${item.marker} ${item.seriesName} :  - </br>`;
          }
        });
        return result;
      },
    },
    legend: {
      data: ["农业生产资料类", "农产品类", "日用消费品类", "再生资源类", "其他类", "总额"],
      textStyle: {
        color: "#B4B4B4",
      },
      top: "0",
    },
    grid: {
      left: "50px",
      right: "40px",
      bottom: "30px",
      top: "20px",
    },
    xAxis: {
      data: props.data.categoryList,
      axisLine: {
        lineStyle: {
          color: "#B4B4B4",
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#B4B4B4",
          },
        },
        axisLabel: {
          formatter: "{value}",
        },
      },
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#B4B4B4",
          },
        },
        axisLabel: {
          formatter: "{value}% ",
        },
      },
    ],
    series: [
      {
        name: "农业生产资料类",
        type: "bar",
        stack: 'bar',
        barWidth: 10,
        itemStyle: {
          borderRadius: 5,
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#956FD4" },
            { offset: 1, color: "#3EACE5" },
          ]),
        },
        data: props.data.oneList,
      },
      {
        name: "日用消费品类",
        type: "bar",
        stack: 'bar',
        barGap: "-100%",
        barWidth: 10,
        itemStyle: {
          borderRadius: 5,
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(156,107,211,0.8)" },
            { offset: 0.2, color: "rgba(156,107,211,0.5)" },
            { offset: 1, color: "rgba(156,107,211,0.2)" },
          ]),
        },
        z: -12,
        data: props.data.twoList,
      },
      {
        name: "再生资源类",
        type: "bar",
        stack: 'bar',
        barGap: "-100%",
        barWidth: 10,
        itemStyle: {
          borderRadius: 5,
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(156,107,211,0.8)" },
            { offset: 0.2, color: "rgba(156,107,211,0.5)" },
            { offset: 1, color: "rgba(156,107,211,0.2)" },
          ]),
        },
        z: -12,
        data: props.data.threeList,
      },
      {
        name: "其他类",
        type: "bar",
        stack: 'bar',
        barGap: "-100%",
        barWidth: 10,
        itemStyle: {
          borderRadius: 5,
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(156,107,211,0.8)" },
            { offset: 0.2, color: "rgba(156,107,211,0.5)" },
            { offset: 1, color: "rgba(156,107,211,0.2)" },
          ]),
        },
        z: -12,
        data: props.data.fourList,
      },
      {
        name: "总额",
        type: "line",
        smooth: true,
        showAllSymbol: true,
        symbol: "emptyCircle",
        symbolSize: 8,
        yAxisIndex: 1,
        itemStyle: {
          color: "#F02FC2",
        },
        data: props.data.totalList,
      },
    ],
  };
});

// 定时获取数据并更新图表
// let refreshInterval: ReturnType<typeof setInterval>;

// onMounted(() => {
//   getData(); // 初始化获取数据
//   // 每 5 秒刷新一次数据
//   refreshInterval = setInterval(() => {
//     getData();
//   }, 5000);  // 你可以根据需要调整这个间隔

//   // 清理定时器以防止内存泄漏
//   onBeforeUnmount(() => {
//     clearInterval(refreshInterval);
//   });
// });
</script>
